{extend name='layout:app'}

{block name='meta'}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
{/block}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/datePicker.css">
<script src="__STATIC__/js/iscroll.js"></script>
<script src="__STATIC__/js/datePicker.js"></script>
<link rel="stylesheet" href="__STATIC__/css/send.css">
{/block}

{block name='content'}
<div id="app" v-loading="loading">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>寄件</div>
        <i class="iconfont icon-home icon_right" @click="home"></i>
    </div>

    <div class="send">
        <div class="send-way">
            <div class="yizhan way-active" @click="chooseWay($event)">
                <div><i class="iconfont icon-yizhan"></i></div>
                <div class="name">驿站寄件</div>
            </div>
            <div class="shangmen" @click="chooseWay($event)">
                <div><i class="iconfont icon-shangmen"></i></div>
                <div class="name">上门收件</div>
            </div>
        </div>

        <div class="yizhan-info">
            <div class="title" style="    padding: 13px 0 6px 20px;line-height: 30px">
                <i class="iconfont icon-lbs"></i>驿站地址：<span>西南交通大学希望学院3栋公寓楼</span>
            </div>
            <div class="info-item" @click="open">
                <div class="name">
                    <span><img src="__STATIC__/imgs/delivery.png" alt="" style="width: 21px"> 选择快递</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="active-info express" data-name="中通">中通快递</div>
            </div>
            <div class="info-item" @click="chooseSender" data-type="0">
                <div class="name">
                    <span><img src="__STATIC__/imgs/sender.png" alt="" style="width: 25px">寄件人信息</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="active-info" id="senderInfo"><!--吴某某   15885220135   成都市青羊区宽窄巷子9号--></div>
            </div>

            <div class="info-item" @click="chooseReceiver" data-type="1">
                <div class="name">
                    <span><img src="__STATIC__/imgs/receiver.png" alt="" style="width: 25px">收件人信息</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="active-info" id="receiverInfo"><!--吴某某   15885220135   成都市青羊区宽窄巷子9号--></div>
            </div>
            <div class="info-item" v-show="onsite">
                <div class="name">
                    <span>上门收件时间</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <!--<div class="active-info">2019年2月14号  12:30-13:30</div>-->
                <el-input v-model="datetime" placeholder="请选择时间" class="active-info" id="choosedate"></el-input>
            </div>
            <div class="info-tips" v-show="onsite">*上门收件一公斤内收取服务费1元，超过1公斤，和服务人员协商处理</div>
        </div>
    </div>

    <transition name="el-fade-in">
        <div id="modal" v-show="chooseExpress" v-cloak>
            <div class="express-list">
                <div class="name" v-for="item in expressList" @click="changeExpress(item)" :data-name="item">{{item}}</div>
            </div>
        </div>
    </transition>
    <div class="btn-area">
        <div class="order">
            <el-button type="primary" @click="btnOrder">下单</el-button>
        </div>
    </div>
</div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script>
    var that;
    new Vue({
        el:'#app',
        data: {
            loading: true,
            expressList: ['中通','申通','韵达','圆通','汇通','顺丰','邮政'],
            chooseExpress: false,
            onsite: false,
            datetime: '',
            addrList: false , //寄件人地址
            addrList2: false, //收件人地址
        },
        created() {
            that = this
            setTimeout(() => {
                $('#choosedate').datePicker({
                    beginyear: new Date().getFullYear(),
                    theme: 'datetime',
                    callBack: function() {
                        // alert("--!当前值:" + $('#date5').val());
                        that.datetime = $('#choosedate').val()
                    }
                });
            }, 500)


            $.when($.get('/index/person/getaddr?type=0'),$.get('/index/person/getaddr?type=1'))
                .done((data1, data2) => {
                    for(item of data1[0].data) {
                        if(item.addr_default === 1) {
                            $('#senderInfo').html(`${item.addr_name} ${item.addr_phone} ${item.addr_province} ${item.addr_city} ${item.addr_area} ${item.addr_detail}`)
                            that.addrList = true
                        }
                    }
                    for(item of data2[0].data) {
                        if(item.addr_default === 1) {
                            $('#receiverInfo').html(`${item.addr_name} ${item.addr_phone} ${item.addr_province} ${item.addr_city} ${item.addr_area} ${item.addr_detail}`)
                            that.addrList2 = true
                        }
                    }
                    that.loading = false
                })


            /*var _sendInfo = JSON.parse(localStorage.getItem('_SendAddr')),
                _ReceiveInfo = JSON.parse(localStorage.getItem('_ReceiveAddr'))
            if(_sendInfo) {
                $('#senderInfo').html(`${_sendInfo.name} ${_sendInfo.phone} ${_sendInfo.addr}`)
                this.addrList = _sendInfo
            }
            if(_ReceiveInfo) {
                $('#receiverInfo').html(`${_ReceiveInfo.name} ${_ReceiveInfo.phone} ${_ReceiveInfo.addr}`)
                this.addrList2 = _ReceiveInfo
            }*/
        },
        mounted() {
            //    当前寄件类型
            if($.trim($('.way-active').text()) == '驿站寄件') {
                sessionStorage.setItem('send-type', 0)
            }else {
                sessionStorage.setItem('send-type', 1)
            }

            if(location.href.includes('send_way=1')) {
                $('.shangmen').click()
            }
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            open() {
                this.chooseExpress = true
            },
            changeExpress(item) {
                this.chooseExpress = false
                $('.express').html(item+'快递')
                $('.express').attr('data-name',item)
            },
            chooseWay(e) {
                if($(e.currentTarget).hasClass('way-active')) {
                    $(e.currentTarget).siblings().removeClass('way-active')
                }else {
                    $(e.currentTarget).addClass('way-active')
                    $(e.currentTarget).siblings().removeClass('way-active')
                }
                if($(e.currentTarget).text() === ' 上门收件') {
                    this.onsite = true
                    sessionStorage.setItem('send-type', 1)
                    history.replaceState({send_way: 1},'send_way','?send_way=1')
                }else {
                    this.onsite = false
                    sessionStorage.setItem('send-type', 0)
                    history.replaceState({send_way: 0},'send_way','?send_way=0')
                }
            },
            chooseSender(e) {
                sessionStorage.setItem('clickType', 0)
                sessionStorage.setItem('service', '')
                if(!this.addrList) {
                    location.href = '/index/person/addNewAddr'
                    return
                }
                location.href = '/index/person/address.html'
            },
            chooseReceiver(e) {
                sessionStorage.setItem('clickType', 1)
                sessionStorage.setItem('service', '')
                if(!this.addrList2) {
                    location.href = '/index/person/addNewAddr'
                    return
                }
                location.href = '/index/person/address.html'
            },
            btnOrder() {
                if(!$('.express').html() || !$('#senderInfo').html() || !$('#receiverInfo').html()) {
                    alert('请完善信息！')
                    return
                }
                if(location.href.includes('send_way=1') && !$('#choosedate').val()) {
                    alert('请填写上门收件时间！')
                    return
                }
                $.post('/index/services/sendOrder',
                    {
                        express: $('.express').attr('data-name'),
                        sender_info: $('#senderInfo').html(),
                        receiver_info: $('#receiverInfo').html(),
                        send_way: location.href.includes('send_way=1') ? 1 : 0,
                        time: location.href.includes('send_way=1') ? $('#choosedate').val() : ''
                    },
                    function (res) {
                        console.log(res)
                        if(res.code === 0) {
                            location.href = '/index/person/myOrder'
                        }
                    }
                )
            }
        }
    });
</script>
{/block}